<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="main">
      <div v-if="num%2===0" style="background-color:blue;">
        <img src="../../assets/01.png" />
      </div>
      <div v-else-if="num%3===0" style="background-color:yellow;">
        >
        <img src="../../assets/02.png" />
      </div>
      <div v-else style="background-color:red;">
        >
        <img src="../../assets/02.png" />
      </div>
      <button @click="LetsDance" v-show="danceshow">Let`s Dance</button>
      <button @click="LetsStop" v-show="stopshow">Let`s Stop</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "让我们一起摇摆！",
      num: 0,
      danceshow: 1,
      stopshow: 0,
      timer: ""
    };
  },
  methods: {
    LetsDance() {
      this.stopshow = 1;
      this.danceshow = 0;
      // while (1)
      // {
      //   setTimeout(() => {
      //     this.num++
      //   }, 1000);
      // }
      // this.num++;
      // for (var i=0;i<10000;i++){
      //     setTimeout(() => {
      //     this.num++
      //     }, 3000);
      // }
      this.timer = setInterval(() => {
        this.num++;
      }, 500);
    },
    LetsStop() {
      this.stopshow = 0;
      this.danceshow = 1;
      clearInterval(this.timer);
    }
  },
  mounted() {
    var vm = this;
    window.mth = function() {
      vm.click();
    };
  },
  watch: {
    num: function() {
      if (this.num > 100) {
        this.stopshow = 0;
        this.danceshow = 1;
        clearInterval(this.timer);
        alert("跳不动了");
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
